<template>
  <div id="app"></div>
</template>

<script>
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import { WindLayer, ScalarFill } from "@sakitam-gis/mapbox-wind"
// const mapboxWind = require('@sakitam-gis/dist/mapbox-wind.esm.js');
// import mapboxWind from '../utils/mapbox-wind.esm.js'

// const mapboxWind = require('../utils/mapbox-wind.esm')

import axios from "axios";
// import dataJson from '@/public/var_ugrd-var_vgrd.json'
export default {
  async mounted() {
    mapboxgl.accessToken =
      "pk.eyJ1IjoiaW54bG54IiwiYSI6ImNsMzRmZDE4dTBhOWczaWs3a2psanphMnUifQ.iKIlYhNlW_13OqBJLOc9sw";

    // const {WindLayer, ScalarFill } = await import("@sakitam-gis/mapbox-wind");
    const map = new mapboxgl.Map({
      container: "app",
      //自己绘制的样式地图令牌
      antialias: true, //抗锯齿
      style: "mapbox://styles/mapbox/dark-v10",
      // center: [113.97923191113188, 22.589860256941634],
      center: [113.53450137499999, 34.44104525],
      zoom: 4,
    });

    const color = {
      temp: [
        [203, [115, 70, 105, 255]],
        [218, [202, 172, 195, 255]],
        [233, [162, 70, 145, 255]],
        [248, [143, 89, 169, 255]],
        [258, [157, 219, 217, 255]],
        [265, [106, 191, 181, 255]],
        [269, [100, 166, 189, 255]],
        [273.15, [93, 133, 198, 255]],
        [274, [68, 125, 99, 255]],
        [283, [128, 147, 24, 255]],
        [294, [243, 183, 4, 255]],
        [303, [232, 83, 25, 255]],
        [320, [71, 14, 0, 255]],
      ],
      wind: [
        [0, [98, 113, 183, 255]],
        [1, [57, 97, 159, 255]],
        [3, [74, 148, 169, 255]],
        [5, [77, 141, 123, 255]],
        [7, [83, 165, 83, 255]],
        [9, [53, 159, 53, 255]],
        [11, [167, 157, 81, 255]],
        [13, [159, 127, 58, 255]],
        [15, [161, 108, 92, 255]],
        [17, [129, 58, 78, 255]],
        [19, [175, 80, 136, 255]],
        [21, [117, 74, 147, 255]],
        [24, [109, 97, 163, 255]],
        [27, [68, 105, 141, 255]],
        [29, [92, 144, 152, 255]],
        [36, [125, 68, 165, 255]],
        [46, [231, 215, 215, 255]],
        [51, [219, 212, 135, 255]],
        [77, [205, 202, 112, 255]],
        [104, [128, 128, 128, 255]],
      ],
    };

    map.on("load", () => {
      map.addSource("custom-vector-source", {
        type: "raster",
        tileSize: 256,
        tiles: [
          "//a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
          "//b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
          "//c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
          "//d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
        ],
      });

      map.addLayer({
        id: "carto",
        type: "raster",
        source: "custom-vector-source",
        paint: {
          "raster-resampling": "nearest",
          "raster-fade-duration": 0,
        },
      });

      const taskArr = [
        axios.get("../wind.json"),
        axios.get("../var_ugrd-var_vgrd.json"),
      ];

      Promise.all(taskArr).then((r) => {
        // console.log("r :>> ", r);
        // console.log('data :>> ', data);

        let { data } = r[0];
        let { data: dataJson } = r[1];

        console.log("data :>> ", data);
        console.log("dataJson :>> ", dataJson);

        // data = data.map((item, idx) => {
        //   item.header = Object.assign(item.header, {
        //     parameterCategory: 1,
        //     parameterNumber: idx === 0 ? 2 : 3,
        //   });
        //   return item;
        // });

        // const windInterpolateColor = color.wind.reduce(
        //   (result, item) =>
        //     result.concat(item[0], 'rgba(' + item[1].join(',') + ')'),
        //   []
        // );

        const windInterpolateColor = color.wind.reduce(
          (result, item) =>
            result.concat(item[0], "rgba(" + item[1].join(",") + ")"),
          []
        );

        const fillLayer = new ScalarFill(
          "wind-fill",
          {
            type: "jsonArray",
            data: dataJson,
            // type: 'image',
            // url: './data/var_ugrd-var_vgrd.png',
            extent: [
              [-180, 85.051129],
              [-180, -85.051129],
              [180, 85.051129],
              [180, -85.051129],
            ],
            width: 1440,
            height: 720,
            uMin: -21.34380340576172,
            uMax: 30.7261962890625,
            vMin: -23.916271209716797,
            vMax: 24.693727493286133,
          },
          {
            // wrapX: true,
            styleSpec: {
              "fill-color": [
                "interpolate",
                ["linear"],
                ["get", "value"],
                ...windInterpolateColor,
              ],
              opacity: [
                "interpolate",
                ["exponential", 0.5],
                ["zoom"],
                5,
                1,
                8,
                1,
              ],
            },
            renderForm: "rg",
            widthSegments: 720,
            heightSegments: 360,
            // widthSegments: 1,
            // heightSegments: 1,
            displayRange: [0, 150],
            mappingRange: [0, 500000],
            // mappingRange: [0, 0],
            // wireframe: false,
          }
        );

        map.addLayer(fillLayer);

        window.windLayer = new WindLayer("wind", data, {
          windOptions: {
            // colorScale: (m) => {
            //   // console.log(m);
            //   return '#fff';
            // },
            // colorScale: [
            //   "rgb(36,104, 180)",
            //   "rgb(60,157, 194)",
            //   "rgb(128,205,193 )",
            //   "rgb(151,218,168 )",
            //   "rgb(198,231,181)",
            //   "rgb(238,247,217)",
            //   "rgb(255,238,159)",
            //   "rgb(252,217,125)",
            //   "rgb(255,182,100)",
            //   "rgb(252,150,75)",
            //   "rgb(250,112,52)",
            //   "rgb(245,64,32)",
            //   "rgb(237,45,28)",
            //   "rgb(220,24,32)",
            //   "rgb(180,0,35)"
            // ],
            // velocityScale: 1 / 20,
            // paths: 5000,
            frameRate: 16,
            maxAge: 60,
            globalAlpha: 0.9,
            velocityScale: 0.01,
            // paths: 10000,
            paths: 3782,
          },
        });
        console.log(map, window.windLayer);

        // map.addLayer(window.windLayer);
        window.windLayer.addTo(map);
      });
    });
  },
};
</script>

<style>
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#app {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}
/* 将底部的logo和信息声明隐藏 */
.mapboxgl-ctrl-logo {
  display: none !important;
}
.mapboxgl-ctrl-bottom-right {
  display: none !important;
}
</style>
